<template>
  <div>
    <!-- 头部区域 -->
    <van-nav-bar title="三个状态来回跳">
      <template #right>
        <van-icon size="25" color="#fff" name="like-o" @click="show = true" />
      </template>
    </van-nav-bar>
    <!-- 头部区域 -->
    <!-- 文本添加区域 -->
    <van-row>
      <van-col span="20">
        <van-field
          v-model="textlist"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="输入你想干的事"
          show-word-limit
        />
      </van-col>
      <van-col span="4">
        <van-button color="#7232dd" @click="addlist">添加</van-button>
      </van-col>
    </van-row>
    <!-- 文本添加区域 -->
    <!-- tab标签切换 -->
    <van-tabs v-model="numsb" type="card" @click="changeTab">
      <van-tab title="未完成" name="1" :badge="$store.getters.gnum.ondo">
      </van-tab>
      <van-tab title="已完成" name="2" :badge="$store.getters.gnum.done">
      </van-tab>
      <van-tab title="回收站" name="3" :badge="$store.getters.gnum.cancel">
      </van-tab>
    </van-tabs>
    <!-- tab标签切换 -->
    <!-- 内容显示区域 -->
    <div v-for="(item, index) in $store.state.list" :key="index">
      <!-- 未完成 -->
      <van-row v-if="item.numsb == numsb">
        <van-col span="6">
          <van-checkbox
            v-model="item.checked"
            shape="square"
            @click="change(index)"
          ></van-checkbox>
        </van-col>
        <van-col span="14">
          <span @click="isedit(index)" v-if="item.isEdit == false">{{
            item.textlist
          }}</span>
          <input
            type="text"
            v-model="item.textlist"
            v-show="item.isEdit"
            @blur="isedit(index)"
            v-focus
          />
        </van-col>
        <van-col span="4">
          <van-button
            plain
            hairline
            type="primary"
            @click="addname(index)"
            v-if="item.numsb == 1"
            >放入回收站</van-button
          >
          <div v-if="item.numsb == 2">{{ item.time | fromData }}</div>
          <van-button
            plain
            hairline
            type="primary"
            v-if="item.numsb == 3"
            @click="del(index)"
            >删除</van-button
          >
        </van-col>
      </van-row>
      <!-- 已完成 -->
      <!-- <van-row v-else-if="item.numsb == 2">
        <van-col span="6">
          <van-checkbox v-model="item.checked" shape="square"  ></van-checkbox>
        </van-col>
        <van-col span="14">
          <span>{{ item.textlist }}</span>
        </van-col>
        <van-col span="4">
          <van-button plain hairline type="primary">放入回收站</van-button>
        </van-col>
      </van-row> -->
      <!-- 回收站 -->
      <!-- <van-row v-else-if="item.numsb == 3">
        <van-col span="6">
          <van-checkbox v-model="item.checked" shape="square" ></van-checkbox>
        </van-col>
        <van-col span="14">
          <span>{{ item.textlist }}</span>
        </van-col>
        <van-col span="4">~
          <van-button plain hairline type="primary">取消</van-button>
        </van-col>
      </van-row> -->
    </div>
    <!-- 内容显示区域 -->
    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block" />
      </div>
    </van-overlay>
    <!-- 遮罩层 -->
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},

  directives: {
    focus: {
      inserted(el, bi) {
        el.focus();
      },
    },
  },

  // 组件状态值
  data() {
    return {
      textlist: "", //文本框的值
      numsb: 1,
      show: false,
      value: "",
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    ...mapMutations(["addname", "del", "isedit"]),
    addlist() {
      let obj = {
        textlist: this.textlist,
        checked: false, //复选框是否选中
        numsb: this.numsb, //切换的状态
        isEdit: false, //
        time: new Date().getTime(), //当前时间戳
      };
      this.$store.commit("addlist", obj);
      this.$toast.success("进去了");
      this.textlist = "";
    },
    // 头部切换
    changeTab(name, title) {
      console.log(name, title);
    },
    change(index) {
      console.log(index);
      this.$store.commit("addchange", index);
    },
  },
  // 过滤器
  filters: {
    fromData(val) {
      // 年也日
      let year = new Date(val).getFullYear(); //年
      let month = new Date(val).getMonth() + 1; //月
      let ydata = new Date(val).getDate(); //日
      return `${year}-${month.toString()}-${ydata.toString()}`;
    },
  },
  // 以下是生命周期钩子 注：没用到的钩子请自行删除
  /**
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {},
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.van-nav-bar {
  background: rgb(109, 243, 51);
}
.van-row {
  margin-top: 10px;
  line-height: 50px;
}
.van-checkbox {
  margin-top: 10px;
  margin-left: 5px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
